JavaScript Charting Documentation - SciChart JavaScript Charts SDK v3.x
SciChart.js JavaScript 2D Charts API > Styling and Theming > Chart Styling - ThemeManager API
Chart Styling - ThemeManager API

SciChart ships with a light and dark theme out of the box, which you can select and apply to the charts in your application. Most of the components of SciChart are also stylable, and you can create your own themes, so you can truly customize the chart to fit your application.

You can view our themes live at the ThemeManager example, over at the SciChart.js Examples Suite.

SciChart Dark Theme

SciChart had a dark theme before dark-mode was cool :) Here's our default theme, SciChart Dark, in all it's glory below.

import { SciChartSurface } from "scichart";
import { SciChartJSDarkv2Theme } from "scichart/Charting/Themes/SciChartJSDarkv2Theme";

// For best results & applying to the loader animation, apply theme before chart creation
const { wasmContext, sciChartSurface } = await SciChartSurface.create("div-element-id", { theme: new SciChartJSDarkv2Theme() });

// Changing theme after creation
sciChartSurface.applyTheme(new SciChartJSDarkv2Theme());

SciChart Light Theme

For applications with a white or lighter background color, we also ship a light theme. This is how it looks:

import { SciChartSurface } from "scichart";
import { SciChartJSLightTheme} from "scichart/Charting/Themes/SciChartJSLightTheme";
// For best results & applying to the loader animation, apply theme before chart creation
const { wasmContext, sciChartSurface } = await SciChartSurface.create("div-element-id", { theme: new SciChartJSLightTheme() });
// Changing theme after creation
 sciChartSurface.applyTheme(new SciChartJSLightTheme());

 

SciChart Navy Theme

In SciChart.js v3, we've added a new Navy theme. This looks great on both a light & dark background. This can be enabled as follows:

import { SciChartSurface } from "scichart";
import { SciChartJsNavyTheme } from "scichart/Charting/Themes/SciChartJsNavyTheme";
// For best results & applying to the loader animation, apply theme before chart creation
const { wasmContext, sciChartSurface } = await SciChartSurface.create("div-element-id", { theme: new SciChartJsNavyTheme() });
// Changing theme after creation
 sciChartSurface.applyTheme(new SciChartJsNavyTheme());

See Also
Chart Styling - Creating a Custom Theme
Chart Styling - Style Chart Parts in Code